Element |
您所在的位置:网站首页 › vue tree组件 › Element |
写项目时经常会遇到使用el-tree的场景,针对用过的,做个简单记录 一,先简单讲一下怎么安装element-ui:1.安装: npm i element-ui2. 在main.js中引入样式以及组件: import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)3.丢个官网在这里,详细可以去查看: Element - The world's most popular Vue UI framework 二,el-tree常见属性:data----用来展示数据 props----树状图配置 label---指定节点标签为节点对象的某个属性值 children---指定子树为节点对象的某个属性值 disabled---指定节点选择框是否禁用为节点对象的某个属性值 show-checkbox---显示选择框 getCheckedKeys----获取当前选中的节点的keys default-expand-----all-默认展开 check-strictly----设置true,可以关闭父子关联 this.$refs.tree.setCheckedKeys([])-----清空当前的选择 三,如果已经获取到了数据,如何把它填充到el-tree中,让某些个复选框处于选中状态? (在el-tree组件中通过setCheckedKeys方法 + node-key将数据 回显到el-tree) 1.给tree补充属性node-key: 2.调用setCheckedKeys: async loadRoleDetail() { const res = await getRoleDetail(this.roleId) console.log('获取角色现有的权限', res.data.permIds) // 回填 + this.$refs.refTree.setCheckedKeys(res.data.permIds) },(下次继续补充) |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |